<template>
    <a-row gutter="8">
        <a-col :span="24">
            <a-card>
                <a-descriptions title="今日数据" :column="4" style="font-size: 12px;font-weight: bold;">
                    <a-descriptions-item label="订单总数">{{ dayInfo?.orderCnt }}</a-descriptions-item>
                    <a-descriptions-item label="订单总额">{{ dayInfo?.sumAmount }}</a-descriptions-item>
                    <a-descriptions-item label="已审订单数">{{ dayInfo?.auditCnt }}</a-descriptions-item>
                    <a-descriptions-item label="未审订单数">{{ dayInfo?.unAuditCnt }}</a-descriptions-item>

                    <a-descriptions-item label="已支付金额">{{ dayInfo?.payAmount }}</a-descriptions-item>
                    <a-descriptions-item label="未支付金额">{{ dayInfo?.unPayAmount }}</a-descriptions-item>
                    <a-descriptions-item label="已发货单量">{{ dayInfo?.unShipmentCnt }}</a-descriptions-item>
                    <a-descriptions-item label="未发货单量">{{ dayInfo?.shipmentCnt }}</a-descriptions-item>

                    <a-descriptions-item label="售后未审核订单数" :span="2">{{ dayInfo?.unAftersaleCnt }}</a-descriptions-item>
                    <a-descriptions-item label="售后已审核订单数" :span="2">{{ dayInfo?.aftersaleCnt }}</a-descriptions-item>
                </a-descriptions>
            </a-card>
        </a-col>
    </a-row>

    <!-- 查询条件 -->
    <a-card>
        <BasicForm @register="registerForm" @submit="handleQuery" />
        <!-- 查询后统计数据 -->
        <a-row gutter="8" class="mb-8px">
            <a-col :span="6">
                <a-card title="销售总额">
                    <template #extra>
                        <h4>{{ dataInfo?.orderAmount }}</h4>
                    </template>
                </a-card>

                <a-row>
                    <a-col :span="8">
                        <Trend term="月同比" :percentage="14" />
                    </a-col>
                    <a-col :span="8">
                        <Trend term="周同比" :percentage="8" />
                    </a-col>
                    <a-col :span="8">
                        <Trend term="日同比" :percentage="15" :type="false" />
                    </a-col>
                </a-row>
            </a-col>
            <a-col :span="6">
                <a-card title="订单总量">
                    <template #extra>
                        <h4>{{ dataInfo?.orderCnt }}</h4>
                    </template>
                </a-card>

                <a-row>
                    <a-col :span="8">
                        <Trend term="月同比" :percentage="14" />
                    </a-col>
                    <a-col :span="8">
                        <Trend term="周同比" :percentage="8" />
                    </a-col>
                    <a-col :span="8">
                        <Trend term="日同比" :percentage="15" :type="false" />
                    </a-col>
                </a-row>
            </a-col>
            <a-col :span="6">
                <a-card title="已支付金额">
                    <template #extra>
                        <h4>{{ dataInfo?.payAmount }}</h4>
                    </template>
                </a-card>
            </a-col>
            <a-col :span="6">
                <a-card title="未支付金额">
                    <template #extra>
                        <h4>{{ dataInfo?.unPayAmount }}</h4>
                    </template>
                </a-card>
            </a-col>
        </a-row>
    </a-card>
    <!-- 查询后排名分析数据 -->
    <a-row>
        <a-col :span="12">
            <a-card title="门店销售榜单">
                <a-table :pagination="false" :dataSource="dataInfo?.storeList" size="small" :columns="storeColumns" bordered
                    :scroll="{ y: 300 }">
                    <template v-slot:bodyCell="{ column, record, text }">
                    </template>
                </a-table>
                <a-pagination  simple v-model:current="pageInfo1.pageNo" v-model:page-size="pageInfo1.pageSize"
                style="margin-top: 15px;margin-left: 75%;" :total="pageInfo1.total" :show-total="total => `共 ${total} 条数据`"
                    @change="onPageChange(1)" />
            </a-card>
        </a-col>
        <a-col :span="12">
            <a-card title="热销商品排名">
                <a-table :pagination="false" :dataSource="dataInfo?.productList" size="small" :columns="productColumns" bordered
                    :scroll="{ y: 300 }">
                    <template v-slot:bodyCell="{ column, record, text }">
                    </template>
                </a-table>
                <a-pagination  size="small" simple v-model:current="pageInfo2.pageNo" v-model:page-size="pageInfo2.pageSize" :total="pageInfo2.total"
                    style="margin-top: 15px;margin-left: 75%;" :show-total="total => `共 ${total} 条数据`" @change="onPageChange(2)" />
            </a-card>
        </a-col>
    </a-row>
    <a-row>

        <a-col :span="24">
            <a-card title="售后分析">
                <a-descriptions :column="3" style="font-size: 16px;font-weight: bold;">
                    <a-descriptions-item label="售后订单数">{{ dataInfo?.aftersaleSum }}</a-descriptions-item>
                    <a-descriptions-item label="售后金额">{{ dataInfo?.sumAmount }}</a-descriptions-item>
                    <a-descriptions-item label="售后率%">{{ !dataInfo?.orderCnt ? 100 : (dataInfo?.aftersaleSum
            / dataInfo?.orderCnt * 100).toFixed(2)
            +
            '%'
                        }}</a-descriptions-item>
                </a-descriptions>
                <a-row :gutter="10">
                    <a-col :span="7">
                        <div ref="chartRef" style="height: 30vh"></div>
                    </a-col>

                    <a-col :span="1">
                    </a-col>
                    <a-col :span="8">
                        <a-table :pagination="false" :dataSource="dataInfo?.typeList"  bordered
                            size="small" :columns="aftersaleTypeColumns" :scroll="{ y: 260 }">
                            <template v-slot:bodyCell="{ column, record, text }">
                            </template>
                        </a-table>
                    </a-col>
                    <a-col :span="8">
                        <a-table :pagination="false" :dataSource="dataInfo?.list" size="small" bordered
                            :columns="aftersaleColumns" :scroll="{ y: 260 }">
                            <template v-slot:bodyCell="{ column, record, text }">
                            </template>
                        </a-table>
                    </a-col>
                </a-row>
            </a-card>
        </a-col>
    </a-row>

</template>
<script lang="ts" setup>
import { ref, Ref } from 'vue';
import {
    queryDayData, queryOrderData,
    getStoreRanking,
    getProductRanking,
    getAftersaleData,
} from './api.ts';

import {
    storeColumns,
    productColumns,
    aftersaleTypeColumns,
    aftersaleColumns,
    queryFormSchema,
} from './data.ts';
import Trend from '/@/components/chart/Trend.vue';
import { useECharts } from '/@/hooks/web/useECharts';
import { useForm, BasicForm, FormSchema } from '/@/components/Form';
import { Pagination } from 'ant-design-vue';
  const APagination = Pagination;
const indexStyle = ref(0);

const dayInfo = ref({}); //今日数据
const dataInfo: any = ref({
    storeList: [],
    productList: [],
}); //查询统计数据

const chartRef = ref<HTMLDivElement | null>(null); //售后原因占比
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);



const [registerForm, { setProps, resetFields, getFieldsValue }] = useForm({
    //注册表单列
    schemas: queryFormSchema,
    //回车提交
    autoSubmitOnEnter: false,
    //是否显示重置按钮
    showResetButton: false,
    //是否显示提交按钮
    // showSubmitButton: false,
    //自定义提交按钮文本和图标
    submitButtonOptions: { text: '查询', preIcon: '' },
    //查询列占比 24代表一行 取值范围 0-24
    labelWidth: 100,
    baseColProps: { span: 5 },
    actionColOptions: {
        span: 3,
        style: { marginLeft: '20px' },
    },
    //将表单内时间区域的值映射成 2个字段, 'YYYY-MM-DD'日期格式化
    fieldMapToTime: [['orderDate', ['orderDate_start', 'orderDate_end'], 'YYYY-MM-DD']],
    //将表单内数值类型区域的值映射成 2个字段
    // fieldMapToNumber: [['workYears', ['workYears_begin', 'workYears_end']]],
});

/*--------------分页加载数据---------------*/
// 门店排行分页
const pageInfo1 = ref({
    pageNo: 1,
    pageSize: 10,
    total: 0,
});

// 商品排行分页
const pageInfo2 = ref({
    pageNo: 1,
    pageSize: 10,
    total: 0,
});
async function onPageChange(type) {
    var params = await getFieldsValue();//取当前表单数据
    //门店分页查询
    if (type == 1) {
        var storeList = await getStoreRanking({
            ...params,
            ...pageInfo1.value,
        });

        //赋值数据
        dataInfo.value.storeList = storeList?.result?.records

        //分页
        pageInfo1.value.total = storeList?.result?.total
        //商品分页查询
    } else if (type == 2) {
        var productList = await getProductRanking({
            ...params,
            ...pageInfo2.value,
        });

        //赋值数据
        dataInfo.value.productList = productList?.result?.records

        //分页
        pageInfo2.value.total = productList?.result?.total
    }
}


/**
 * 查询按钮
 */
async function handleQuery() {
    var params = await getFieldsValue();//取当前表单数据

    var orderInfo = await queryOrderData(params);
    var storeList = await getStoreRanking(params);
    var productList = await getProductRanking(params);
    var aftersaleList = await getAftersaleData(params);

    //赋值数据
    dataInfo.value = {
        ...orderInfo?.result,
        ...aftersaleList?.result,
    }
    dataInfo.value.storeList = storeList?.result?.records
    dataInfo.value.productList = productList?.result?.records,


        //初始化分页
        pageInfo1.value = {
            pageNo: 1,
            pageSize: 10,
            total: storeList?.result?.total,
        }
    pageInfo2.value = {
        pageNo: 1,
        pageSize: 10,
        total: productList?.result?.total,
    }

    //扇形图写入
    setOptions({
        tooltip: {
            trigger: 'item',
        },
        legend: {
            orient: 'vertical',
            left: 'right',
            top: 'bottom',
        },
        series: [
            {
                type: 'pie',
                radius: '50%',
                data: dataInfo.value?.rensonList,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)',
                    },
                },
            },
        ],
    });
}


//初始化
const dataReload = async function () {
    //今日数据
    const data1 = await queryDayData();
    dayInfo.value = data1;

    //查询数据
    handleQuery();
}
dataReload();
</script>